<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="lib :: common_header"></head>
<body>
<div th:replace="lib :: header_box"></div>
<div th:replace="lib :: menu_box (31)"></div>

<div class="main-box">
    <div class="main-container">
        <div th:replace="lib :: main_container_header ('资产管理', '资产管理')"></div><!-- /main_container_header -->
        <div class="f14" id="app" v-cloak>
            <br>
            <div class="row">
                <div class="col-sm-12">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="">
                            <el-autocomplete
                                    class="inline-input"
                                    v-model="state1"
                                    value-key="name"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入名称"
                                    style="width:400px;"
                                    clearable>
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-autocomplete>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div><!-- /col -->
            </div><!-- /row -->

            <div class="row">
                <div class="col-sm-12">
                    <!-- 查询条件 -->
                    <search-condition
                            :item-list="searchItem"
                            v-model="dataSetCondition"
                            @condition-change="search()">
                        <dl class="sfilter-tag fix indexChoose">
                            <div class="l" style="width:76px; margin-top:7px;">
                                <dt>注册时间</dt>
                            </div>
                            <div class="l" style="width:80%;" >
                                <el-date-picker
                                        v-model="myDate"
                                        type="daterange"
                                        @change="search"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </dl>
                    </search-condition>
                </div><!-- /col -->
            </div><!-- /row -->
            <br>

            <div class="row">
                <div class="col-sm-12">
                    <div class="my-table-box">
                        <div id="ajaxlist">
                            <table class="m_srchList">
                                <tbody id="search-result">
                                <tr>
                                    <td width="40">
                                        <el-checkbox @change="checkAll" v-model="allCheck"></el-checkbox>
                                    </td>
                                    <td colspan="3">
                                        <el-button type="primary" @click="openShenqing">申请使用数据集</el-button>
                                        <span class="search-info-no">
                                            共查到
                                            <span style="color:red;">
                                                {{ dataSetFromDB.length }}
                                            </span>条符合条件的数据集信息
                                        </span>
                                    </td>
                                </tr>
                                <tr class="f12" v-for="(item, index) in dataSet">
                                    <td width="30">
                                        <el-checkbox v-model="checkBoxValues[index + (pageNo - 1) * pageSize]"
                                                     :true-label="item.id + '_' + (index + (pageNo - 1) * pageSize)">
                                        </el-checkbox>
                                    </td>
                                    <td class="imgtd" width="110">
                                        <img th:src="@{/images/v3.jpeg}">
                                    </td>
                                    <td>
                                        <a class="ma_h1">
                                            <em class="f14">{{ item.name }}</em>
                                        </a>
                                        <div class="search-tags pt10 pb10">
                                            <span class="ntag text-primary">状态{{ item.status | changeAssetStatus }}</span>
                                            <span class="ntag text-primary">{{ item.type | changeAssetType }}</span>
                                            <span class="ntag text-primary">{{ item.lifecycle | changeAssetLifeCycle }}</span>
                                        </div>
                                        <p class="m-t-xs">
                                            文件名：<a class="text-primary">{{ item.file_name }}</a> <el-divider direction="vertical"></el-divider>
                                            <template v-if="item.file_size > 1000 * 1000">
                                                文件大小：{{ Math.round(item.file_size / 1024 / 1024 * 100) / 100 }}G
                                            </template>
                                            <template v-else>
                                                文件大小：{{ Math.round(item.file_size / 1024 * 100) / 100 }}M
                                            </template>
                                        </p>
                                        <p class="m-t-xs">
                                            用途： {{ item.purpose }} <el-divider direction="vertical"></el-divider>
                                            上传时间：{{ item.createdate }}
                                        </p>
                                        <p>
                                            数据归属组织：{{ item.associator_name }} <el-divider direction="vertical"></el-divider>
                                            数据提供者：{{ item.provider_name }} <el-divider direction="vertical"></el-divider>
                                            操作员：{{ item.op_name }}
                                        </p>
                                        <p class="m-t-xs">
                                            摘要：{{ item.abstract }}
                                        </p>
                                    </td>
                                    <td width="220" class="statustd">
                                        <el-button plain
                                                   type="mini"
                                                   icon="el-icon-s-promotion"
                                                   @click="requestDataSet(item)">
                                            查看数据集详细信息
                                        </el-button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="tc" v-if="dataSetFromDB.length === 0" style="height:100px; border-bottom:1px solid #e2e2e2; line-height:100px;">
                                <span style="color:#CCC;">暂无数据</span>
                            </div>
                        </div><!-- /ajaxlist -->
                    </div><!-- /my-table-box -->

                    <div class="tr mt10" v-if="dataSetFromDB.length != 0">
                        <el-pagination
                                layout="sizes, prev, pager, next"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="pageSize"
                                :current-page.sync="pageNo"
                                :total="dataSetFromDB.length"
                                @size-change="sizeChange"
                                @current-change="pageChange">
                        </el-pagination>
                    </div><!-- /分页 -->
                </div><!-- /col -->
            </div><!-- /row -->

            <el-dialog
                    title="申请数据集"
                    width="600px"
                    :visible.sync="dialogVisible">
                <div>
                    <el-form label-width="100px">
                        <el-form-item label="参与项目：" style="margin-bottom:0;">
                            <template v-for="(item, index) in projects">
                                <el-checkbox v-model="checkBoxValues3[index]"
                                             :checked="false"
                                            :true-label="item.id">{{ item.name }}</el-checkbox>
                            </template>
                        </el-form-item>
                        <el-form-item label="所选数据集：" style="margin-bottom:0;">
                            <table class="table" style="border:0; margin-bottom:0;">
                                <tr v-for="(item, index) in checkBoxValues.filter(node => node)">
                                    <td v-if="item">
                                        <el-checkbox v-model="checkBoxValues2[index]"
                                                     :checked="true"
                                                    :true-label="item.split('_')[0]">
                                            {{ dataSetFromDB[item.split('_')[1]].file_name }}
                                        </el-checkbox>
                                    </td>
                                </tr>
                                <tr v-if="checkBoxValues.filter(node => node).length == 0">
                                    <td class="tc" style="color:gray">请选择数据集</td>
                                </tr>
                            </table>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sendMail();">申 请</el-button>
                </span>
            </el-dialog>

        </div><!-- /app -->
    </div>
</div>
<div th:replace="lib :: javascript_box"></div>
<script th:src="@{/lib/user/datasource_index.js}"></script>
</body>
</html>
